<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/bigData.css">
		<!-- 引入 Vue 3 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 引入hls.js -->
		<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
		<!-- 引入 Element Plus -->
		<script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>
		
	</head>
	<body>
		<div class="main" id="bigData">
			<div class="bigDataContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<span class="text">大数据气象预测</span>
					<div class="rightH">
						<div class="goback" @click="goback"><span>返回</span></div>
						{{yearMonth}} {{hoursMin}}
					</div>
				</div>
				<!-- 内容开始 -->
				<div class="colorfulContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem">
							<div class="titleComm"><span>数据预览</span></div>
							<div id="cropArea">
								<div class="cropareaItem">
									<div class="cropaTitle">监测天数</div>
									<div class="concropa">{{baseInfo.checkCnt}}</div>
								</div>
								<div class="cropareaItem">
									<div class="cropaTitle">正常</div>
									<div class="concropa">{{baseInfo.checkNormalCnt}}</div>
								</div>
								<div class="cropareaItem">
									<div class="cropaTitle">异常</div>
									<div class="concropa">{{baseInfo.checkAlertCnt}}</div>
								</div>
							</div>
						</div>
						<div class="leftItem" style="margin: 2vh 0;">
							<div class="titleComm"><span>全球气象监测</span></div>
							<div class="harmfulOrganisms">
								<div class="tabheader">
									<div style="width: 18%;">城市名称</div>
									<div style="width: 18%;">类型</div>
									<div style="width: 16%;">当前温度</div>
									<div style="width: 16%;">未来预测</div>
									<div style="width: 16%;">雷雨概率</div>
									<div style="width: 16%;">雾霾指数</div>
								</div>
								<div class="scrolling-container" style="height: calc(100% - 36px);">
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in featuresData" :key="index">
											<div style="width: 18%;">{{item.region}}</div>
											<div style="width: 18%;">预测</div>
											<div style="width: 16%;">{{item.temp}}℃</div>
											<div style="width: 16%;">{{item.featureTemp}}℃</div>
											<div style="width: 16%;">{{item.rainRate}}%</div>
											<div style="width: 16%;">{{item.pm25}}</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in featuresData" :key="index">
											<div style="width: 18%;">{{item.region}}</div>
											<div style="width: 18%;">预测</div>
											<div style="width: 16%;">{{item.temp}}℃</div>
											<div style="width: 16%;">{{item.featureTemp}}℃</div>
											<div style="width: 16%;">{{item.rainRate}}%</div>
											<div style="width: 16%;">{{item.pm25}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>空气指数</span></div>
							<div id="datastatistics"></div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div class="selectWrapper">
							<div class="customelect">
								<div class="select__wrapper" @click="selectItemFlag = !selectItemFlag">
									<div class="selecttext">{{searchValue}}</div>
									<i :class="[selectItemFlag?'elactive':'','el-icon el-select__caret']">
										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
											<path fill="currentColor" d="m192 384 320 384 320-384z"></path>
										</svg>
									</i>
								</div>
								<div class="customelectafter" v-show="selectItemFlag"  v-cloak></div>
								<div class="selectItemw" v-show="selectItemFlag"  v-cloak>
									<div :class="[searchValue=='全部村镇'?'select':'','item']" @click="initMap({region:'全部村镇'})">全部村镇</div>
									<div v-for="(item,index) in townMaps" :key="index"  
									    :class="[searchValue==item.region?'select':'','item']" @click="initMap(item)">{{item.region}}</div>
								</div>
							</div>
						</div>
						<div id="mapView" class="mapView"></div>
						<!-- 物理防控器械应用情况 -->
						<div class="preventionControl">
							<div class="totalRightwrapper">
								<div class="titleMore">
									<div class="titleComm">
										<span>天气排行</span>
										
									</div>
									<span class="subtitle">
										查看更多
										<img src="/screen/assets/images/right.png" alt="" class="rightjiantou">
									</span>
								</div>
								<div class="centerBotton">
									<div id="centerBottonL"></div>
								</div>
							</div>

						</div>
					</div>
					<!-- 右侧的内容 -->
					<div class="rightContent">
						<div class="leftItem">
							<div class="titleComm"><span>气象预测</span></div>
							<div class="totalRightwrapper" style="height: 54vh;">
								<div class="infotitle">
									<span class="nameinfo">当前气象</span>
								</div>
								<div id="harmful"></div>
								<div class="infotitle">
									<span class="nameinfo">未来预测</span>
								</div>
								<div id="harmful2"></div>
								<div class="yibwrapper">
									<div class="yibItem">
										<div class="yibtit">风向</div>
										<div class="lcCon">
											{{baseInfo.windDir}}
										</div>
									</div>
									<div class="yibItem">
										<div class="yibtit">风速km/h</div>
										<div class="lcCon">
											{{baseInfo.windSpeed}}
										</div>
									</div>
									<div class="yibItem">
										<div class="yibtit">降雨量ML</div>
										<div class="lcCon">{{baseInfo.qpf}}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem" style="margin-top: 0.7vh;">
							<div class="titleComm"><span>摄像头</span></div>
							<div class="origin">
								<video ref="videoPlayer" controls class="origin"></video>
								<!-- <img src="/screen/assets/images/colorful/chong.png" alt="" class="originitem" />
								<img src="/screen/assets/images/colorful/chong.png" alt="" class="originitem" />
								<img src="/screen/assets/images/colorful/chong.png" alt="" class="originitem" />
								<img src="/screen/assets/images/colorful/chong.png" alt="" class="originitem" /> -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="module">
			const { createApp, ref, onMounted, nextTick } = Vue;
			import { barHengChartFun } from "/screen/echarts/baeheng.js"; //折线图区域
			import { lineBar2ChartFun } from "/screen/echarts/lineBarChart2.js"; //柱状和折线图 虚线
			import { mapChartFun } from "/screen/echarts/mapwea.js"; //地图
			let baseUrl = 'https://sxadmin.sxgkx.cn/STleXfFAvV.php/screen/'
			createApp({
				setup() {
					let mapCharts
					const baseInfo = ref({
						checkCnt: '', //检测天数
						checkNormalCnt: '', //检测正常天数
						checkAlertCnt: '', //检测异常天数
						windDir: '', //风向
						windSpeed: '', //风速
						qpf: '', //定量降水量
					})
					const searchValue = ref('全部村镇')
					const townMaps = ref([]) //镇的数据
					const selectItemFlag = ref(false);
					const searchIn = ref({});
					const featuresData = ref([])
					const mapData = ref([])
					const hoursMin = ref('00:00');
					const yearMonth = ref('');
					const week = ref('');
					let timer = null;
					const videoPlayer = ref(null); // 用于引用video元素
					onMounted(() => {
						// 确保video元素已经挂载
						const video = videoPlayer.value;
						let hls;
						if (Hls.isSupported()) {
						    hls = new Hls();
						    hls.loadSource('https://open.ys7.com/v3/openlive/FX2632749_1_1.m3u8?expire=1813824835&id=861278662987468800&t=67ffb2fdf236fb7ea905c24983bd54695b644cbb14a396f66090dbd6140ba822&ev=100'); // 替换成你的m3u8地址
						    hls.attachMedia(video);
						    hls.on(Hls.Events.MANIFEST_PARSED, function() {
						        video.play();
						    });
						} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
						    // 对于原生支持HLS的浏览器（如Safari）
						    video.src = 'https://open.ys7.com/v3/openlive/FX2632749_1_1.m3u8?expire=1813824835&id=861278662987468800&t=67ffb2fdf236fb7ea905c24983bd54695b644cbb14a396f66090dbd6140ba822&ev=100'; // 替换成你的m3u8地址
						    video.addEventListener('loadedmetadata', function() {
						        video.play();
						    });
						}
						let datastatisticsCharts = echarts.init(document.getElementById('datastatistics'));// 空气指数
						let lineAreaCharts = echarts.init(document.getElementById('centerBottonL'));// 天气排行榜
						let lineBar2Charts = echarts.init(document.getElementById('harmful'));// 当前气象
						let lineBar2Charts3 = echarts.init(document.getElementById('harmful2'));// 未来气象
						$.ajax({
							url: baseUrl + 'weather/map',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								baseInfo.value = {
									checkCnt: data.data.checkCnt, //检测天数
									checkNormalCnt: data.data.checkNormalCnt, //检测正常天数
									checkAlertCnt: data.data.checkAlertCnt, //检测异常天数
									windDir: data.data.windDir, //风向
									windSpeed: data.data.windSpeed, //风速
									qpf: data.data.qpf, //定量降水量
								}
								featuresData.value = data.data.features
								
								// 空气指数
								datastatisticsCharts.setOption(JSON.parse(JSON.stringify(barHengChartFun({
									xData: data.data.airBarMaps.yData,
									legendShow: false,
									yData: data.data.airBarMaps.xData,
									endValue: 6,
								}))));
								
								// 天气排行榜
								lineAreaCharts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun({
									...data.data.weatherBarMaps,
									legendShow: true,
								}))));
								
								// 当前气象
								lineBar2Charts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun({
									...data.data.hourLineMaps,
									legendShow: true,
									labelflag: false,
								}))));
								
								// 未来气象
								lineBar2Charts3.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun({
									...data.data.dayHourMaps,
									legendShow: true,
									labelflag: false,
									gridtop:'17%'
								}))));
							},
						})
						const nowTod = new Date();
						const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
						yearMonth.value = nowTod.getFullYear() + '/' + (nowTod.getMonth() + 1) + '/' +nowTod.getDate() +'日'
						week.value = weekdays[nowTod.getDay()]
						updateTime();
						timer = setInterval(updateTime, 1000);
						nextTick(() => {
							mapCharts = echarts.init(document.getElementById('mapView'));
							initMap()
						})
					});
					// 地图
					const initMap = (Val) => {
						if(Val){
							searchValue.value = Val.region
							searchIn.value = Val
							selectItemFlag.value = false
						}
						fetch('/screen/assets/area.json')
						.then(response => response.json())
						.then(areaData => {
							let  newareaData = areaData.features.filter(obj => obj.properties.name != '蒿川乡');
							areaData.features = newareaData
							
							let cityname = searchValue.value == '全部村镇' ? '沙坡头区' : searchValue.value
							let zommN = cityname == '沙坡头区' ? 0.58 : 0.52
							let cityData;
							if(searchValue.value == '全部村镇'){
							  cityData = areaData
							} else {
							  cityData = {
								"type": "FeatureCollection",
								"name": "沙坡头区",
								"features": areaData.features.filter((item)=>{
								  return searchValue.value == item.properties.name
								})
							  }
							}
							echarts.registerMap(cityname, cityData);
							let data1 = cityData.features.map((item) => {
							  return {
								name: item.properties.name,
							  };
							});
							$.ajax({
								url: baseUrl + 'weather/map',
								type: 'GET',
								timeout: 15000,
								success: function(data) {
									townMaps.value = data.data.features
									let geoCoordMap = []
									let customerBatteryCityData = []
									if(searchValue.value == '全部村镇'){
										data.data.features.forEach(item=>{
											if(item.region == '镇罗镇'){
												geoCoordMap[item.region] = [Number(item.lon), Number(item.lat)]
												customerBatteryCityData.push({
													name:item.region,
													value: 0.4,
													fdl:'99%',
													tds:1,
													fds:101,
													...item
												})
											} 
										})
									} else {
										data.data.features.forEach(item=>{
											if(item.region == searchValue.value){
												geoCoordMap[item.region] = [Number(item.lon), Number(item.lat)]
												customerBatteryCityData.push({
													name:item.region,
													value: 0.05,
													fdl:'99%',
													tds:1,
													fds:101,
													...item
												})
											}
											
										})
									}
									let mapOption = mapChartFun(cityname, data1, zommN, geoCoordMap,customerBatteryCityData )
									mapCharts.setOption(mapOption, true)
									if(searchValue.value == '全部村镇'){
									  mapCharts.dispatchAction({
									    type: 'highlight',
									    seriesIndex: 0,
									    name: '镇罗镇' 
									  });
									} else {
									  mapCharts.dispatchAction({
									    type: 'highlight',
									    seriesIndex: 0,
									    name: searchValue.value
									  });
									}
								}
							})
							
						})
					}
					const goback = () =>{
						window.location.href='./listrenovation.html'
					}
					const updateTime = () => {
					  const now = new Date();
					  hoursMin.value = formatTimeUnit(now.getHours()) + ':' + formatTimeUnit(now.getMinutes())
					};
					
					const formatTimeUnit = (unit) => {
					  return unit < 10 ? '0' + unit : unit.toString();
					};
					return {
						baseInfo,
						featuresData,
						hoursMin,
						yearMonth,
						searchValue,
						searchIn,
						townMaps,
						selectItemFlag,
						initMap,
						goback,
						videoPlayer
					};
				}
			}).use(ElementPlus).mount('#bigData');
		</script>
	</body>

</html>